<template>
	<view class="contenter">
		<view v-if="owners.length>0">
			<view class="block__title">成员信息</view>
			<view v-for="(item,index) in owners" :key="index"
				class="content bg-white margin-bottom margin-right-xs radius margin-left-xs padding">

				<view class="flex padding-bottom-xs solid-bottom justify-between">
					<view class="info_header">
						<view class="photo">
							<img src="../../static/我的.png" alt="">
						</view>
						<view class="">
							{{item.name}}
						</view>
					</view>
					<view class="header_title text-gray" v-if="item.memberType == 1">业主户主</view>
					<view class="header_title text-gray" v-if="item.memberType == 2">业主成员</view>
					<view class="header_title text-gray" v-if="item.memberType == 3">租户户主</view>
					<view class="header_title text-gray" v-if="item.memberType == 4">住户成员</view>
				</view>
				
				<view class="flex margin-top justify-between">
					<view class="text-gray">成员手机号</view>
					<view class="text-gray">{{item.phone}}</view>
				</view>
				<view class="flex margin-top-xs justify-between">
					<view class="text-gray">身份证号</view>
					<view class="text-gray">{{item.identityCard}}</view>
				</view>

				<view class="flex margin-top-xs justify-between">
					<view class="text-gray">成员年龄</view>
					<view class="text-gray">{{item.age}}岁</view>
				</view>
				<view class="flex margin-top-xs justify-between">
					<view class="text-gray">成员性别</view>
					<view class="text-gray">{{item.sex == 0? '男': '女'}}</view>
				</view>

				<view class="solid-top flex justify-end margin-top padding-top-sm padding-bottom-sm"
					v-if="item.memberId == ownerId">

				</view>
				<view class="solid-top flex justify-end margin-top padding-top-sm padding-bottom-sm" v-else>
					<button class="cu-btn round-btn bg-red " @click="_deleteOwnerMember(item)">移除</button>
				</view>

			</view>



		</view>
		<view v-else>
			<no-data-page></no-data-page>
		</view>

		<view v-if="memberType == 0 || memberType == 2" class="bg-white  border flex justify-end"
			style="display:flex;justify-content: space-evenly;position: fixed;width: 100%;bottom: 0;">
			<view class="btn-group" style="width: 300rpx;height: 120rpx;">
				<button class="cu-btn bg-cyan shadow-blur " @click="family_home">审核家庭成员</button>
			</view>
			<view class="btn-group" style="width: 300rpx;height: 120rpx;">
				<button class="cu-btn bg-green shadow-blur " style="width: 100%;"
					@click="goAdd(ownerMemberType)">添加成员</button>
			</view>
		</view>
		<view v-else>

		</view>

		<view class="cu-modal" :class="delOwnerMemberFlag==true?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">温馨提示</view>
					<view class="action" @tap="_cancleCall()">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					您确认删除该成员？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action margin-0 flex-sub  solid-left" @tap="_cancleDeleteOwnerMember()">取消</view>
					<view class="action margin-0 flex-sub text-green solid-left" @tap="_doDeleteOwnerMember()">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import context from '../../lib/java110/Java110Context.js';
	const constant = context.constant;
	import noDataPage from '@/components/no-data-page/no-data-page.vue';

	// import {
	// 	deleteOwnerMember
	// } from '../../api/owner/ownerApi.js'
	export default {
		data() {
			return {
				memberType: 0, //成员身份类型
				owners: '',
				delOwnerMemberFlag: false,
				page: 1,
				totalPage: 0,
				loading: false,
				communityId: '1111',
				ownerId: '', //业主ID
				ownerMemberId: '', //业主成员ID
				ownerMemberType: '', //业主成员类型
				curOwnerMember: {},
				ownerTypeCd: '1001',
				bindState:"",
			};
		},
		components: {
			noDataPage
		},
		
		onLoad(options) {
			let _that = this;
			_that._loadFamilyList();
			
			// let identity = uni.getStorageSync("bindUserInfo");
			// _that.bindState = identity.bindState

		},
		onShow: function() {
			// this._initData();

		},
		onPullDownRefresh() {
			this._loadFamilyList();
		},
		// onPullDownRefresh: function() {
		// 	// 上拉刷新
		// 	if (!this.loading) {
		// 		this.getTable(1, true).then(() => {
		// 			// 处理完成后，终止下拉刷新
		// 			wx.stopPullDownRefresh();
		// 		});
		// 	}
		// },
		onReachBottom: function() {
			console.log(1, !this.loading, this.page < this.totalPage); // 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求

			if (!this.loading && this.page < this.totalPage) {
				this.getTable(this.page + 1);
			}
		},
		computed:{
		        // msg(){
		        //     return this.$store.state.currDbSource
		        // }
		    },
		methods: {
			_loadFamilyList() {
				uni.request({
					url: constant.url.saveOwnerList,
					 header: context.getHeaders(),
					// header: context.getHeaders(),
					method: "GET",
					data: {
						proprietorId: 0, //业主身份类型
						pageNo: 1,
						pageSize: 10,
					},
					success: (res) => {
						this.owners = res.data.result.records
						console.log("家庭成员", this.owners)
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			goAdd: function(ownerMemberType) {
				uni.navigateTo({
					url: '/pagesA/family/family'
				})
			},
			family_home: function() {
				uni.navigateTo({
					url: "../family/familyMumber"
				})
			},
			_cancleCall: function() {
				this.delOwnerMemberFlag = false;
			},
			_deleteOwnerMember: function(item) {
				this.delOwnerMemberFlag = true;
				this.curOwnerMember = item;
			},
			_cancleDeleteOwnerMember: function(item) {
				this.delOwnerMemberFlag = false;
			},
			_doDeleteOwnerMember: function() {
				let that = this;
				uni.request({
					url: constant.url.deleteOwner,
					header: context.getHeaders(),
					method: "GET",
					data: {
						id: that.curOwnerMember.id,
					},
					success: function(res) {
						uni.showToast({
							icon: 'none',
							title: '删除成功'
						});
						that.delOwnerMemberFlag = false;
						that._loadFamilyList();
						console.log("数据", res.data)
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.contenter {
		width: 100%;
		height: calc(100vh - 120rpx);
		overflow-y: auto;
	}

	.info_header {
		display: flex;
		width: 36%;
		align-items: center;
		justify-content: space-around;
	}

	.header_title {
		line-height: 100rpx;
	}

	.photo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1rpx solid whitesmoke;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		margin: 0rpx 30rpx 20rpx 30rpx;
		border-radius: 30rpx;
	}

	.ppf_item {
		padding: 0rpx 0rpx 0rpx 0rpx;
	}

	.btn-group {
		height: 100%;
		display: flex;
		align-items: center;

		button {
			width: 100%;
			height: 80rpx;
			border-radius: 40rpx;
		}
	}

	.block__title {
		margin: 0;
		font-weight: 400;
		font-size: 14px;
		color: rgba(69, 90, 100, .6);
		padding: 40rpx 30rpx 20rpx;
	}

	.button_up_blank {
		height: 100rpx;
	}

	.cu-btn.lgplus {
		padding: 0 20px;
		font-size: 18px;
		height: 100upx;

	}

	.cu-btn.sharp {
		border-radius: 0upx;
	}

	.line-height {
		line-height: 100upx;
	}
</style>
